<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="utf-8" />
  <meta name="renderer" content="webkit" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <meta name="author" content="" />
  <title></title>
  <link href="css/daterangepicker.min.css" rel="stylesheet" />
  <link rel="stylesheet" href="css/main.css" />
  <link rel="stylesheet" href="enterpriseCommon/common.css">
  <link rel="shortcut icon" href="favicon.ico" />
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
  <style>
    [v-cloak] {
      display: none;
    }

    .el-select input,
    .el-input input {
      padding-left: 15px;
      height: 40px !important;
    }

    .el-select,
    .el-input-number,
    .el-input {
      width: 270px;
    }

    #map-container {
      height: 100%;
    }

    .el-input-select,
    .el-input-select .el-input,
    .half-select .el-input {
      width: 100%;
    }

    .el-select__input {
      border: none !important;
      margin-left: 0;
    }

    .section351 .map-box .btn,
    .section351 .map-box .input {
      float: none;
    }

    .search-tips {
      width: 280px;
      background: #fff;
    }

    .half-select {
      width: 400px;
    }

    .box2 .item {
      float: left;
      margin-bottom: 30px;
    }

    .box2 .r {
      margin-left: 70px;
    }

    #address-output {
      overflow: hidden;
      padding: 0 10px;
    }

    #address-output .auto-item {
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .box2 .item p {
      margin-bottom: 8px;
      font-size: 16px;
      font-weight: bold;
      position: relative;
    }

    .box2 .item.w400 {
      width: 400px;
    }

    .section351 .box2 .con .input {
      width: 100%;
    }


    .upload-wrap {
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px dashed #ddd
    }

    .upload-wrap .upload-title {
      padding: 10px 0;
      font-size: 26px;
      line-height: 30px;
    }

    .upload-wrap .upload-title small {
      font-size: 0.4em;
    }

    /* .el-upload.el-upload--picture-card,
    .el-upload-list--picture-card .el-upload-list__item {
      border: none;
      width: 104px;
      height: 104px;
    } */

  </style>
  <script src="js/vue.js"></script>
  <!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
  <div id="app" v-cloak>
    <header>
    </header>
    <div class="header-space"></div>

    <section class="section351">
      <div class="content">

        <div class="title">基础信息</div>
        <div class="box filter">
          <div class="item">
            <p>职位名称</p>
            <div class="con">
              <el-input v-model.trim="name" :max-length="20" placeholder="请输入职位名称"></el-input>
            </div>
          </div>
          <div class="item">
            <p>薪资（单位：k）</p>
            <div class="con">
              <input v-model="salary_min" style="width: 45%" type="text" class="input" placeholder="最低" @change="salaryChange">
              <span style="float: left; width: 10%;text-align: center;">-</span>
              <input v-model="salary_max" style="float: right;width: 45%" type="text" class="input" placeholder="最高" @change="salaryChange">
              <!-- <el-select v-model="salary" placeholder="请选择薪资范围">
								<el-option v-for="(item, index) in salaryList" :key="index" :label="item" :value="item">
								</el-option>
							</el-select> -->
            </div>
          </div>
          <div class="item">
            <p>学历</p>
            <div class="con">
              <el-select v-model="education_id" placeholder="请选择学历">
                <el-option v-for="(item, index) in educationList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="item r">
            <p>工作经验</p>
            <div class="con">
              <el-select v-model="experience_config_id" class="common-select" placeholder="请选择工作经验">
                <el-option v-for="item in experience_configList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>
          <div class="item">
            <p>工作性质</p>
            <div class="con">
              <el-radio v-for="item in natureList" :key="item.id" v-model="nature_id" :label="item.id">{{item.name}}
              </el-radio>
            </div>
          </div>
          <div class="item">
            <p>招聘人数</p>
            <div class="con">
              <el-input-number v-model="num" :min="1" label="请输入招聘人数"></el-input-number>
            </div>
          </div>
          <div class="item w570 r">
            <p>福利待遇</p>
            <div class="con">
              <el-select v-model="welfare_ids" multiple filterable default-first-option placeholder="按回车添加标签" class="el-input-select" @change="tagChangeHandle">
                <el-option v-for="item in welfareList" :key="item.id" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
          </div>

        </div>
        <div class="title">职位类型</div>
        <div class="box box3">
          <el-select v-model="position_id" class="common-select" placeholder="请选择职位类型">
            <el-option v-for="item in positionList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="title">工作地址</div>
        <div class="box box2">
          <div class="con">
            <div class="item w400">
              <p>公司所在地</p>
              <div class="con">
                <el-cascader v-model="area_id" :options="areaList" :props="{
								value: 'id',
								label: 'region_name',
								children: 'children'
							}" class="half-select" @change="setCity" ref="cascader"></el-cascader>
              </div>
            </div>
            <div class="item w400 r">
              <p>详细地址</p>
              <div class="con">
                <input v-model.trim="address" type="text" placeholder="请输入公司详细地址（可自动获取地图上的位置）" class="input" />
              </div>
            </div>
          </div>
          <div class="map-box">
            <div id="map-container"></div>
            <div class="map-operate">
              <input v-model="mapAddress" id="keyword-input" type="text" placeholder="关键词搜索" class="input search-on" />
              <input type="submit" value="保存" class="btn" @click="saveAddress" />
              <div id="address-output" class="search-tips show">
                <!-- <a href="">海淀文教产业园（东门）</a>
                <a href="">海淀文教产业园（东门）</a>
                <a href="">海淀文教产业园（东门）</a>
                <a href="">海淀文教产业园（东门）</a>
                <a href="">海淀文教产业园（东门）</a> -->
              </div>
            </div>
          </div>
        </div>
        <div class="title">技能要求</div>
        <div class="box box3">
          <div class="textarea-box">
            <textarea v-model.trim="skill" name="" placeholder="请输入技能要求" id="" cols="30" rows="10"></textarea>
            <div class="number">{{skill.length}}/500</div>
          </div>
        </div>
        <div class="title">职位描述</div>
        <div class="box box4">
          <div class="textarea-box">
            <textarea v-model.trim="desc" name="" placeholder="请输入职位描述" id="" cols="30" rows="10"></textarea>
            <div class="number">{{desc.length}}/1000</div>
          </div>
          <div class="upload-wrap">
            <div class="upload-title">描述图片 <small>支持格式：jpg、jpeg、gf、png，小于 10 MB，最多可上传3张。</small></div>
            <div class="upload-box">
              <el-upload ref="uploadEl" :before-upload="checkImg" :on-change="checkImg" :on-exceed="showLimitOutMsg" :auto-upload="false" :file-list="imgList" :limit="3" :http-request="uploadImg" accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG" action="" multiple list-type="picture-card" class="avatar-uploader">
                <div slot="default" class="upload">
                  <span style="line-height: 1;">上传图片</span>
                </div>
              </el-upload>
            </div>
          </div>
        </div>
        <div class="title">团队介绍</div>
        <div class="box box4">
          <div class="textarea-box">
            <textarea v-model.trim="intro" name="" placeholder="请输入职位描述" id="" cols="30" rows="10"></textarea>
            <div class="number">{{intro.length}}/1000</div>
          </div>
        </div>


        <div class="bottom-operate">
          <div href="javascript:void(0)" class="btn btn-white" @click="saveHandle(1)">预览</div>
          <div href="javascript:void(0)" class="btn" @click="saveHandle(2)">发布</div>
        </div>


      </div>
    </section>



    <footer>
    </footer>
  </div>
  <script src="js/jquery.min.js"></script>
  <script src="js/slide.min.js"></script>
  <script src="js/polyfill.min.js"></script>
  <script src="js/jquery.nicescroll3.7.6.min.js"></script>
  <script src="js/main.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <script src="https://webapi.amap.com/maps?v=1.4.15&key=24688df90aef7762942b8f9b94ba2e70&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
  <script src="js/request.js"></script>
  <script src="js/getPrepareData.js"></script>
  <script>
    $(function() {
      $("header").load("./enterpriseCommon/header.html");
      $("footer").load("./enterpriseCommon/footer.html");
    })

  </script>
  <script>
    var rules = [{
      key: 'name',
      msg: '职位名称必须填写'
    }, {
      key: 'education_id',
      msg: '请选择学历'
    }, {
      key: 'experience_config_id',
      msg: '请选择工作经验'
    }, {
      key: 'address',
      msg: '请输入公司详细地址'
    }, {
      key: 'skill',
      msg: '请输入技能要求'
    }, {
      key: 'desc',
      msg: '请输入职位描述'
    }, {
      key: 'intro',
      msg: '请输入职位描述'
    }, {
      key: 'welfare_ids',
      msg: '请添加福利待遇'
    }, {
      key: 'position_id',
      msg: '请选择职位类型'
    }];
    var PREVIEW_KEY = 'preview35';
    var map, auto, placeSearch, _location = [0, 0];
    var vm = new Vue({
      el: '#app',
      data: {
        "id": getUrlParams().id || 0,
        "name": "",
        "nature_id": 1,
        natureList: [{
            id: 0,
            name: '实习'
          },
          {
            id: 1,
            name: '全职'
          },
          {
            id: 2,
            name: '兼职'
          },
        ],
        "education_id": '',
        educationList: [],
        salary: '',
        salaryList: [],
        salary_min: 0,
        salary_max: 1,
        positionList: [],
        position_id: '',
        "num": 1,
        "experience_config_id": '',
        experience_configList: [],
        "area_id": [1, 2, 3],
        areaList: [],
        "address": '',
        mapAddress: '',
        "skill": "",
        "desc": "",
        "intro": "",
        "welfare_ids": [],
        welfareList: [{
            id: 1,
            name: '五险一金'
          },
          {
            id: 2,
            name: '节假日旅游'
          },
          {
            id: 3,
            name: '零食'
          },
        ],
        imgList: [] // 上传的图片列表
      },
      watch: {
        name: function(val) {
          if (val.length > 20) this.name = this.name.substring(0, 20);
        },
        skill: function(val) {
          if (val.length > 500) this.skill = val.substring(0, 500)
        },
        desc: function(val) {
          if (val.length > 500) this.desc = val.substring(0, 1000)
        },
        intro: function(val) {
          if (val.length > 500) this.intro = val.substring(0, 1000)
        }
      },
      created: function() {
        prepare.getRecruitPrepare(this.setPrepare.bind(this))
        this.setDefault();
      },
      mounted: function() {
        var self = this;
        map = new AMap.Map('map-container');
        auto = new AMap.Autocomplete({
          input: 'keyword-input',
          output: 'address-output'
        });

        placeSearch = new AMap.PlaceSearch({
          map: map
        });

        AMap.event.addListener(auto, 'select', function(e) {
          self.mapAddress = e.poi.name;
          placeSearch.setCity(e.poi.adcode);
          placeSearch.search(e.poi.name);
        })
        AMap.event.addListener(placeSearch, 'markerClick', function(e) {
          var data = e.data;
          var location = data.location;
          var name = data.address;
          _location = ['' + location.lng, '' + location.lat];
          self.mapAddress = data.name + '(' + data.address + ')';
        })
      },
      methods: {
        testUploadImg() {
          this.$refs.uploadEl.submit()
        },
        setPrepare: function(data) {
          this.areaList = data.region;
          this.natureList = data.nature;
          this.educationList = data.education;
          this.welfareList = data.welfare;
          this.positionList = data.position;
          this.experience_configList = data.experience_config.map(function(item) {
            item.name = item.min + ' ~ ' + item.max
            return item
          });
          this.statusList = data.status;
        },

        setCity: function(res) {
          var selectData = this.$refs.cascader.getCheckedNodes()[0];
          var city = selectData.parent.data.region_name;
          auto.setCity(city)
        },
        saveAddress: function() {
          this.address = this.mapAddress;
        },
        setDefault: function() {
          if (getUrlParams().session) {

            this.getRecruit('session');
          } else if (this.id) {
            // return;
            this.getRecruit('id');
          }
        },

        getRecruit: function(type) {
          var id = this.id;
          if (type === 'session') {
            var _data = JSON.parse(sessionStorage.getItem('recruit_session') || null)
            if (_data) {
              this.id = _data.id
              success.call(this, {
                data: _data
              })
            }
          } else {
            request('enterprise/recruit/' + id, 'GET', '', success.bind(this), fail.bind(this))
          }

          function success(res) {

            var data = res.data;
            var area = [1, 2, 3];

            function getArea(id, list, result) {
              list = list || prepare.prepareData.regionList || [];
              result = result || [];
              var item, val;
              for (var i = 0; i < list.length; i++) {
                item = list[i];
                if (item.id === id) {
                  result.push(item)
                  return result;
                } else if (item.children) {
                  getArea(id, item.children, result);
                  if (result.length) {
                    result.unshift(item);
                    return result
                  }
                }
              }
              return result;
            }
            if (type === 'session') {
              area = getArea(data.area_id, prepare.prepareData.regionList)
              if (area.length == 2) {
                area.push(area[1].children[0])
              }
              area = area.map(function(item) {
                return item.id
              })
              this.nature_id = data.nature_id;
              this.education_id = data.education_id;
              this.experience_config_id = data.experience_config_id;
              this.welfare_ids = data.welfare_ids.split(',');
            } else {
              if (data.area) {
                area = getArea(data.area.id, prepare.prepareData.regionList)
                if (area.length == 2) {
                  area.push(area[1].children[0])
                }
                area = area.map(function(item) {
                  return item.id
                })
              }
              this.nature_id = data.nature.id;
              this.education_id = data.education.id;
              this.experience_config_id = data.experience.id;
              this.welfare_ids = data.welfare.map(function(item) {
                return item.welfare_id
              });

            }

            this.name = data.name;
            this.salary_min = data.salary_min;
            this.salary_max = data.salary_max;
            this.num = data.num;
            this.position_id = data.position_id;
            this.address = data.address;
            this.area_id = area;
            this.skill = data.skill;
            this.desc = data.desc;
            this.intro = data.intro;
            this.imgList = (data.img || []).map(function(src, index) {
              return {
                name: 'img-' + index,
                url: src
              }
            })

          }

          function fail(err) {
            this.$message.error('获取岗位详情失败')
          }
        },
        tagChangeHandle: function(tagList) {
          console.log(tagList);
          console.log(this.welfare_ids);
        },
        salaryChange: function() {
          var min = +this.salary_min || 0;
          if (min >= this.salary_max) {
            this.salary_max = (+min || 0) + 1
          }
          this.salary_min = min;
        },
        uploadImg: function(e) {},
        checkImg: function(file, fileList) {
          if (file.size > 10 * 1024 * 1024) {
            this.$message('上传图片大小应小于10MB')
            if (fileList) {
              this.$refs.EnterpriseImg.clearFiles()
            }
            return false
          }
          return true
        },
        showLimitOutMsg: function() {
          this.$message.warning('最多只能上传3张图片')
        },
        saveHandle: function(type) {

          var area_id = this.area_id;
          if (area_id instanceof Array) {
            area_id = area_id[1] || 0
          }
          var address = this.address || (this.address = this.mapAddress);
          var params = {
            "id": this.id || '',
            "name": this.name,
            "nature_id": this.nature_id,
            "education_id": this.education_id,
            "salary_min": +this.salary_min || 0,
            "salary_max": +this.salary_max || 0,
            "position_id": this.position_id,
            "num": this.num,
            location: address == this.mapAddress ? _location : [0, 0],
            "experience_config_id": this.experience_config_id,
            "area_id": area_id,
            "address": address,
            "skill": this.skill,
            "desc": this.desc,
            "intro": this.intro,
            "welfare_ids": this.welfare_ids.join(',')
          }

          var isReady = rules.every(function(rule) {
            var key = rule.key;
            if (params[key] === '') {
              this.$message(rule.msg)
              return false
            }
            return true
          }, this)
          if (!isReady) return

          // 发布
          if (type === 2) {
            params.push = 1;
          }
          var loading = this.$loading({
            lock: true,
            text: '提交中',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })

          var uploadList = this.$refs.uploadEl.uploadFiles;
          var len = uploadList.length;
          var imgList = new Array(len);
          var count = 0;

          function cFn(err) {
            count++;
            if (count >= len) {
              params.img = imgList;
              this.sendData(params, type, loading);
            }
          }
          var completeFn = cFn.bind(this)
          if (len) {
            uploadList.forEach(function(uploadItem, index) {
              var raw = uploadItem.raw;
              if (raw) {
                uploadImg({
                  file: uploadItem.raw,
                  success: function sFn(res) {
                    imgList[index] = qiniuUrl + '/' + res.key
                  },
                  complete: completeFn
                })
              } else {
                imgList[index] = uploadItem.url;
                completeFn()
              }
            })
          } else {
            completeFn()
          }

          // this.sendData(params, type)

        },
        sendData: function(params, type, loading) {
          var postData = JSON.stringify(params)

          function failFn(err) {
            var msg = err.responseJSON ? err.responseJSON.message : '操作失败'
            this.$message.error(msg)
            loading.close()
          }

          function successFn(res) {
            var id = res.data.id;
            loading.close()
            this.$message({
              type: 'success',
              message: res.message
            })
            setTimeout(function() {
              location.href = './37.html?id=' + id;
            }, 2000)

          }
          if (type === 2) {
            request('enterprise/recruit/' + (this.id || ''), 'PUT', postData, successFn.bind(this), failFn.bind(this))
          } else {
            sessionStorage.setItem('recruit_session', postData)
            location.href = './36.html';
          }
        }
      }
    })

  </script>
</body>

</html>
